<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>LabEnergyInsight - 实验室能耗管理平台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
    <style>
        body {
            background-color: #f5f5f5;
        }
        .phone-container {
            width: 430px;
            height: 932px;
            border-radius: 55px;
            background: white;
            position: relative;
            overflow: hidden;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
        }
        .status-bar {
            height: 44px;
            background: #000;
            color: white;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 20px;
            font-size: 14px;
        }
        .nav-bar {
            height: 50px;
            background: white;
            border-top: 1px solid #eee;
            position: absolute;
            bottom: 0;
            width: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #666;
            font-size: 12px;
            cursor: pointer;
            text-decoration: none;
        }
        .nav-item.active {
            color: #007AFF;
        }
        .nav-item i {
            font-size: 20px;
            margin-bottom: 2px;
        }
        iframe {
            width: 100%;
            height: calc(100% - 94px);
            border: none;
        }
    </style>
</head>
<body class="min-h-screen flex items-center justify-center p-8">
    <div class="phone-container">
        <!-- Status Bar -->
        <div class="status-bar">
            <span>9:41</span>
            <div class="flex items-center space-x-2">
                <i class="fas fa-signal"></i>
                <i class="fas fa-wifi"></i>
                <i class="fas fa-battery-full"></i>
            </div>
        </div>
        
        <!-- Content Area -->
        <iframe id="contentFrame" src="dashboard.html" name="contentFrame"></iframe>
        
        <!-- Navigation Bar -->
        <div class="nav-bar">
            <a href="dashboard.html" target="contentFrame" class="nav-item active" onclick="updateActiveNav(this)">
                <i class="fas fa-chart-line"></i>
                <span>监控</span>
            </a>
            <a href="ai-prediction.html" target="contentFrame" class="nav-item" onclick="updateActiveNav(this)">
                <i class="fas fa-brain"></i>
                <span>预测</span>
            </a>
            <a href="alerts.html" target="contentFrame" class="nav-item" onclick="updateActiveNav(this)">
                <i class="fas fa-bell"></i>
                <span>预警</span>
            </a>
            <a href="devices.html" target="contentFrame" class="nav-item" onclick="updateActiveNav(this)">
                <i class="fas fa-microchip"></i>
                <span>设备</span>
            </a>
            <a href="settings.html" target="contentFrame" class="nav-item" onclick="updateActiveNav(this)">
                <i class="fas fa-cog"></i>
                <span>设置</span>
            </a>
        </div>
    </div>

    <script>
        function updateActiveNav(element) {
            // Remove active class from all nav items
            document.querySelectorAll('.nav-item').forEach(item => {
                item.classList.remove('active');
            });
            // Add active class to clicked item
            element.classList.add('active');
        }

        // Handle iframe load events to update navigation
        document.getElementById('contentFrame').onload = function() {
            const currentSrc = this.src;
            const navItems = document.querySelectorAll('.nav-item');
            navItems.forEach(item => {
                if (item.href === currentSrc) {
                    updateActiveNav(item);
                }
            });
        };
    </script>
</body>
</html> 